<template>
  <div class="max-w-screen-x1 pb-20 bg-gray-50">
    <div class="bg-white p-4 border-b border-gray-200">
      <h1 class="text-xl font-bold">确认订单</h1>
    </div>

    <!-- 订单信息 -->
    <div class="bg-white mt-3">
      <div class="p-4 border-b border-gray-100">
        <h2 class="font-medium">收货信息</h2>
      </div>
      <div class="p-4 flex items-center">
        <div class="flex-1">
          <div class="flex items-center">
            <span class="font-medium">张三</span>
            <span class="ml-4">13800138000</span>
          </div>
          <div class="mt-1 text-gray-600">北京市朝阳区建国路88号</div>
        </div>
        <i class="fa-solid fa-chevron-right text-gray-400"></i>
      </div>
    </div>

    <!-- 商品信息 -->
    <div class="bg-white mt-3">
      <div class="p-4 border-b border-gray-100">
        <h2 class="font-medium">商品信息</h2>
      </div>
      <div class="divide-y divide-gray-100">
        <div v-for="item in cartItems" :key="item.id" class="p-4 flex">
          <img :src="item.image" alt="商品图片" class="w-16 h-16 object-cover rounded" />
          <div class="ml-3 flex-1">
            <div class="font-medium">{{ item.name }}</div>
            <div class="text-gray-600 text-sm">¥{{ item.price }} x {{ item.quantity }}</div>
          </div>
          <div class="text-right">
            <div class="font-medium">¥{{ item.price * item.quantity }}</div>
          </div>
        </div>
      </div>

      <!-- 订单摘要 -->
      <div class="p-4 space-y-3">
        <div class="flex justify-between">
          <span class="text-gray-600">商品总价</span>
          <span>¥{{ subtotal }}</span>
        </div>
        <div class="flex justify-between">
          <span class="text-gray-600">配送费</span>
          <span>¥5</span>
        </div>
        <div class="flex justify-between">
          <span class="text-gray-600">优惠券</span>
          <span class="text-red-500">-¥3</span>
        </div>
        <div class="flex justify-between font-medium">
          <span>实付款</span>
          <span class="text-red-600">¥{{ total }}</span>
        </div>
      </div>
    </div>

    <!-- 支付方式 -->
    <div class="bg-white mt-3">
      <div class="p-4 border-b border-gray-100">
        <h2 class="font-medium">支付方式</h2>
      </div>
      <div class="p-4">
        <div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg mb-3">
          <div class="flex items-center">
            <i class="fa-brands fa-alipay text-blue-500 text-xl"></i>
            <span class="ml-3">支付宝</span>
          </div>
          <i class="fa-solid fa-check-circle text-blue-500" v-if="paymentMethod === 'alipay'"></i>
        </div>
        <div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg">
          <div class="flex items-center">
            <i class="fa-brands fa-weixin text-green-500 text-xl"></i>
            <span class="ml-3">微信支付</span>
          </div>
          <i class="fa-solid fa-check-circle text-green-500" v-if="paymentMethod === 'wechat'"></i>
        </div>
      </div>
    </div>

    <!-- 底部支付按钮 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200">
      <div class="flex">
        <div class="flex-1 p-3">
          <div class="flex items-baseline justify-end">
            <span class="text-sm text-gray-500">实付:</span>
            <span class="ml-1 text-xl font-bold text-red-600">¥{{ total }}</span>
          </div>
        </div>
        <button
            class="bg-red-600 text-white px-6 py-3 font-medium"
            @click="pay"
        >
          确认支付
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

const cartItems = ref([])
const total = ref(0)
const paymentMethod = ref('alipay')

onMounted(() => {
  if (route.query.items && route.query.total) {
    cartItems.value = JSON.parse(route.query.items)
    total.value = parseFloat(route.query.total) + 5 - 3 // 加上配送费，减去优惠券
  }
})

const subtotal = computed(() => {
  return cartItems.value.reduce((sum, item) => sum + item.price * item.quantity, 0)
})

const pay = () => {
  // 模拟支付过程
  setTimeout(() => {
    // 支付成功后跳转到订单页面
    router.push({ name: 'Orders' })
  }, 1000)
}
</script>